{extend name="base" /}
{block name="css"}

<link href="__CSS__/m_style.css" rel="stylesheet" type="text/css">
{/block}
{block name="js"}

<script type="text/javascript" src="__JS__/jquery.jiazai.js"></script>


<script src="__JS__/pinterest_grid.js"></script>

<script src="__JS__/jquery.infinitescroll.dev.js"></script>

{/block}
{block name="script"}
<script>
    $('#gallery-wrapper').infinitescroll({
                loading: {
                    msgText: "",
                    img: "__STATIC__/images/loading01.gif",
                    finishedMsg: '没有新图片了哦...',
                    selector: '.loading' //loading选择器
                },
                navSelector: "#pages", //导航的选择器，会被隐藏
                nextSelector: "#next",//包含下一页链接的选择器
                itemSelector: ".white-panel",//你将要取回的选项(内容块)
                debug: true, //启用调试信息，若启用必须引入debug.js
                dataType: 'html',//格式要和itemSelector保持一致
                maxPage: 1000,//最大加载的页数
                //                animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
                extraScrollPx: 15, //滚动条距离底部多少像素的时候开始加载，默认150
                                bufferPx: 4, //载入信息的显示时间，时间越大，载入信息显示时间越短
                errorCallback: function() { //加载完数据后的回调函数
                },
                path: function(index) { //获取下一页方法
                    return "?page=" + index;
                }
            },
            function(newElements, data, url) { //回调函数
                //console.log(data);
                //alert(url);
            });
</script>
<script type="text/javascript">
    $(function(){
        $("#gallery-wrapper").pinterest_grid({
            no_columns: 2,
            padding_x: 10,
            padding_y: 10,
            margin_bottom: 50,
            single_column_breakpoint: 200

        });

    });
</script>




{/block}
{block name="body"}
<!--content-->
<div class="main">
    <div class="mainbox">

        <div class="title">
            <h1 style="margin-top: 75px; font-size: 21px;padding-left: 4%; padding-top: 15px;padding-bottom: 10px;color:#594336;">美女图片推荐</h1>
        </div>

    </div>
</div>

<div class="content-01" style="margin-bottom: 200px;">
    <section id="gallery-wrapper">
        {foreach name="results" item="result"}
        <article class="white-panel">

            <a class="font" href="{:url('phone/index/detail',['id'=>$result['id']])}" target="_blank">
                <img class="thumb"  src="{$result.thumb}" alt="">
                <h2>{$result.author}</h2>
                <div class="text-00">
                    <h3>{$result.title}</h3>
                </div>
            </a>
        </article>
        {/foreach}

    </section>

</div>
<div style="height: 40px;width: 100%;"></div>
<div id="pages">
    <a id="next" href="http://image.tpadmin.mmt/phone?page=1">下一页</a><!-- 此处可以是url，可以是action，要注意不是每种html都可以加，
        是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，
        没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->
</div>
<div class="loading" style="display: block; margin: auto; margin-bottom:20px;text-align: center; color:#9e7e6b;"></div>



{/block}